import { ElMessage, ElMessageBox } from 'element-plus'

// 键盘帮助内容接口
export interface KeyboardHelpContent {
  title: string
  color: string
  items: Array<{
    command: string
    description: string
    isVoiceCommand?: boolean
  }>
  tip?: string
}

// 键盘帮助工具类
export class KeyboardHelpUtils {
  
  /**
   * 获取普通输入模式的帮助内容
   */
  static getNormalModeHelp(): KeyboardHelpContent {
    return {
      title: '⌨️ 普通输入模式',
      color: '#409eff',
      items: [
        { command: 'Enter', description: '发送消息' },
        { command: 'Shift + Enter', description: '换行' },
        { command: 'Ctrl + Enter', description: '强制发送' }
      ],
      tip: '💡 提示：按住Shift+Enter可以换行，单独按Enter发送消息'
    }
  }

  /**
   * 获取语音输入模式的帮助内容
   */
  static getVoiceModeHelp(): KeyboardHelpContent {
    return {
      title: '🎤 语音输入模式',
      color: '#67c23a',
      items: [
        { command: '"...发送"', description: '发送消息', isVoiceCommand: true },
        { command: '"...执行"/"...确认"', description: '确认执行操作', isVoiceCommand: true },
        { command: '"...取消"', description: '取消操作', isVoiceCommand: true },
        { command: '"关闭麦克风"', description: '停止录音', isVoiceCommand: true },
        { command: '"清空"/"清除"/"重录"', description: '清空输入内容', isVoiceCommand: true },
        { command: '"清屏"', description: '清空对话记录', isVoiceCommand: true }
      ],
      tip: '💡 提示：说出内容后加上指令词即可执行相应操作'
    }
  }

  /**
   * 获取人机交互模式的帮助内容
   */
  static getInteractionModeHelp(): KeyboardHelpContent {
    return {
      title: '🤖 人机交互模式',
      color: '#faad14',
      items: [
        { command: 'Enter', description: '确认执行' },
        { command: 'Escape', description: '取消执行' },
        { command: '"...执行"/"...确认"', description: '语音确认执行', isVoiceCommand: true },
        { command: '"...取消"', description: '语音取消执行', isVoiceCommand: true },
        { command: '"关闭麦克风"', description: '停止录音', isVoiceCommand: true }
      ],
      tip: '💡 提示：请在输入框中输入补充说明，然后选择确认或取消操作'
    }
  }

  /**
   * 显示键盘快捷键帮助
   */
  static showHelp(content: KeyboardHelpContent) {
    const itemsHtml = content.items.map(item => {
      if (item.isVoiceCommand) {
        // 语音指令样式
        return `
          <p style="margin: 6px 0;">
            <span style="padding: 2px 8px; background: #e8f5e8; color: #52c41a; border: 1px solid #b7eb8f; border-radius: 12px; font-size: 12px; font-weight: 500;">🎤 ${item.command}</span> 
            <span style="margin-left: 8px;">${item.description}</span>
          </p>
        `
      } else {
        // 键盘快捷键样式
        return `
          <p style="margin: 6px 0;">
            <kbd style="padding: 2px 6px; background: #f5f7fa; border: 1px solid #ddd; border-radius: 3px; font-family: monospace;">${item.command}</kbd> ${item.description}
          </p>
        `
      }
    }).join('')

    const html = `
      <div style="line-height: 1.6;">
        ${itemsHtml}
        ${content.tip ? `<p style="margin-top: 16px; padding: 8px; background: #f0f9ff; border-left: 4px solid ${content.color}; color: #1890ff; font-size: 13px;">${content.tip}</p>` : ''}
      </div>
    `

    ElMessageBox.alert(html, content.title, {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '知道了',
      confirmButtonClass: 'el-button--primary',
      customClass: 'keyboard-help-dialog'
    })
  }

  /**
   * 根据当前模式显示对应的帮助信息
   */
  static showHelpByMode(isVoiceMode: boolean = false, isInteractionMode: boolean = false) {
    let helpContent: KeyboardHelpContent

    if (isInteractionMode) {
      helpContent = this.getInteractionModeHelp()
    } else if (isVoiceMode) {
      helpContent = this.getVoiceModeHelp()
    } else {
      helpContent = this.getNormalModeHelp()
    }

    this.showHelp(helpContent)
  }
}

// 默认导出
export default KeyboardHelpUtils
